<template>
    <div class="app-container" style="background: #fff;">
      <div class="pb-15" v-for="item in tableData" :key="item.id">
        <el-row :gutter="5" type="flex" justify="space-between" align="middle">
            <el-col :span="10">
              <div class="f-16 f-w600">{{item.name}}</div>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="applyHandle(item)">申请</el-button>
            </el-col>
        </el-row>
        <div class="info-content f-14">
          <el-row :gutter="5" type="flex" align="middle">
              <el-col :span="24">
                <span class="c-aaa">资源描述：</span><span class="c-666">{{item.apidiscrible}}</span>
              </el-col>
          </el-row>
          <el-row :gutter="5" type="flex" align="middle">
            <!-- <el-col :span="3">
              <span class="c-aaa">所属主题：</span><span class="c-666">{{item.apidiscrible}}</span>
            </el-col> -->
            <el-col :span="5">
              <span class="c-aaa">来源部门：</span><span class="c-666">{{item.source}}</span>
            </el-col>
            <!-- <el-col :span="3">
              <span class="c-aaa">开放类型：</span><span class="c-666">{{item.apidiscrible}}</span>
            </el-col> -->
            <el-col :span="5">
              <span class="c-aaa">更新日期：</span><span class="c-666">{{parseTime(item.updatetime,'{yyyy}-{mm}-{dd}')}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="5" type="flex" align="middle" justify="space-between">
            <el-col :span="5">
              <span class="c-aaa">数据格式：</span><span class="c-666">{{item.datatype}}</span>
            </el-col>
            <el-col :span="12">
              <div class="d-flex a-center">
                <div class="d-flex a-center pr-15">
                  <span class="c-aaa">评分：</span><el-rate disabled v-model="item.score"></el-rate>
                </div>
                <div class="d-flex a-center" style="width: 150px;">
                  <span class="c-aaa">调用量：</span><span class="c-666">{{item.visitcount}}</span>
                </div>
                <div class="d-flex a-center" style="width: 150px;">
                  <span class="c-aaa">申请次数：</span><span class="c-666">{{item.applycount}}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-dialog title="订阅申请" :visible.sync="open" width="680px" append-to-body>
        <el-form label-width="80px">
          <el-form-item label="用途">
            <el-input v-model="form.use"></el-input>
          </el-form-item>
          <el-form-item label="申请理由">
            <el-input type="textarea" v-model="form.applyreason" :rows="6"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="cancelForm">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
</template>
<script>
import {getPremissionList,addPremission} from '@/api/dataManage/dataexport.js'
import subApply from './subApplication.vue'
export default {
  components: {
    subApply
  },

  data() {
    return {
      tableData: [],
      open:false,
      form:{},
    }
  },
  created() {
    this.getList()
  },
  methods: {
    applyHandle(item){
      this.open = true;
      this.form ={
      "applyname": "user",
      "applyreason": "",
      "use": "",
      "apiid": item.id,
      "apiname": item.name,
      "apiurl": item.path
      }
    },
    async submitForm(){
      await addPremission(this.form);
      this.open = false;
      // this.getList();
    },
    cancelForm(){
      this.open = false;
    },
    async getList() {
      let res =  await getPremissionList({isenable:'1'});
      if(res.code =='200'){
        this.tableData = res.rows
      }
    }, 
  } 
}

</script>
<style lang="scss" scoped>
  .info-content{
    .el-row{
      padding: 5px 0;
    }
    padding-bottom: 5px;
    border-bottom: 1px #aaa dashed;
  }
</style>